<script setup lang="ts">
import { ref, watch } from 'vue'
import { NCard, NForm, NFormItem, NInput, NButton } from 'naive-ui'

interface ShortcutCommand {
  name: string
  content: string
}

const props = defineProps<{
  command: ShortcutCommand
  isEditing: boolean
}>()

const emit = defineEmits<{
  (e: 'save', command: ShortcutCommand): void
  (e: 'cancel'): void
}>()

const localCommand = ref<ShortcutCommand>({ ...props.command })

watch(
  () => props.command,
  (newCommand) => {
    localCommand.value = { ...newCommand }
  }
)

function saveCommand() {
  emit('save', localCommand.value)
}

function cancel() {
  emit('cancel')
}
</script>

<template>
  <n-card
    style="width: 350px"
    :title="isEditing ? '编辑快捷指令' : '添加快捷指令'"
    :bordered="false"
    size="small"
    role="dialog"
    aria-modal="true"
  >
    <n-form label-placement="left" label-width="50px">
      <n-form-item label="名称">
        <n-input v-model:value="localCommand.name" placeholder="指令名称" />
      </n-form-item>
      <n-form-item label="内容">
        <n-input v-model:value="localCommand.content" placeholder="指令内容" />
      </n-form-item>
    </n-form>
    <template #footer>
      <div class="flex items-center justify-end gap-2">
        <n-button @click="saveCommand" size="small" type="primary">
          {{ isEditing ? '保存' : '添加' }}
        </n-button>
        <n-button @click="cancel" size="small">取消</n-button>
      </div>
    </template>
  </n-card>
</template>